import React, { Component } from 'react';
import {Carousel} from 'antd-mobile'
import connect from './connect'

class swiper extends Component {
    state = {
      
        imgHeight: 176,
      }
    render() {
   
        return (
         

        <Carousel
          autoplay={true}
          infinite
          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          afterChange={index => console.log('slide to', index)}
        > 
          {this.props.img.map(item => (
            <a
              key={item.id}
              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
            >
              <img             
                src={item.img}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event('resize'));
                  this.setState({ imgHeight: 'auto' });              
                }}
              />
            </a>
          ))}
        </Carousel>
  
        );
    }
}

export default connect(swiper);
